<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>网格布局</title>
    <style>
        .outer{
            display: grid;
            border: 4px orange solid;
            grid-gap: 10px;

            /*
                可以为网格线命名
            */
            grid-template-columns: [a] 200px [b] 200px [c] 200px [d];
            grid-template-rows: [head-row-start] 200px [head-row-end side-row-start] 200px [side-row-end] ;
        }

        .outer div{
            border: 4px red solid;
        }

        .box1{
            grid-column: a/c;
            grid-row: side-row-start/side-row-end;
        }
    </style>
</head>
<body>

<div class="outer">
    <div class="box1">box1</div>
    <div class="box2">box2</div>
    <div class="box3">box3</div>
    <div class="box4">box4</div>
    <div class="box5">box5</div>
    <div class="box6">box6</div>
</div>

</body>
</html>